<template>
  <view class="bg">
    <view class="login">
      <view class="logo">
        <image
          src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1717556460604180.png"
          mode="aspectFill"
        ></image>
      </view>
      <view class="wx-login" @click="wx_login">
        <image
          src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/login_weixin.png"
          mode=""
        ></image
        >微信登录
      </view>
      <view class="yzm-login" @click="phone_login">
        <image
          src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/login_phone.png"
          mode=""
        ></image>
        手机登录
      </view>
    </view>
    <view class="check" @click="tapAgree">
      <radio
        style="transform: scale(0.7)"
        :checked="isRead"
        color="#B98B51"
      ></radio>
      我已阅读并同意<text class="c_sed" @click.stop="openPopupTip"
        >《聚农优品软件服务协议》</text
      >
    </view>
    <view class="bottom"> 版本号：V{{ version }} </view>
    <!-- <view class="tips" v-if="tipsShow">
			<view class="tit">
				请允许聚农优品使用“位置”权限
			</view>
			<view class="lit">
				为了提供更贴近您兴趣的本地资讯及您所在地区的信息服务。我们需要获得您设备的所在地区信息 (仅获取您所在地县级及以上行政区划的信息)。不授权该权限不影响您使用App。
			</view>
		</view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      version: "",
      phone: "",
      isRead: false,
      tipsShow:false
    };
  },
  onLoad() {
    const info = uni.getSystemInfoSync();
    this.version = info.appWgtVersion;
    this.tipsShow = true
			setTimeout(()=>{
				this.tipsShow = false
			},5000)
  },
  methods: {
    tapAgree() {
      this.isRead = !this.isRead;
    },
    openPopupTip() {
      this.nav_to('/pages/start/protocol')
    },
    async phone_login() {
      if (!this.isRead) {
        this.$pv.msg("请先阅读并同意\n《聚农优品软件服务协议》");
        return;
      }
      this.nav_to("/pages/start/phone");
    },
    async wx_login() {
      if (!this.isRead) {
        this.$pv.msg("请先阅读并同意\n《聚农优品软件服务协议》");
        return;
      }
      //如果已经手机号登录过，则以手机号为准
      let mobile = uni.getStorageSync("app_user_mobile");

      let that = this;
	  console.log('app登录了');
      uni.login({
        provider: "weixin",
        onlyAuthorize: true,
        async success(loginRes) {
          uni.showLoading({
            mask: true,
          });
          let res = await that.$api.post("/User/WXAppLogin", {
            code: loginRes.code,
            mobile: mobile,
          });
          console.log(res,'resres');
          uni.hideLoading();
          if (res) {
            const d = res.data;
            const user = d.UserData;
            // const im = await that.$im.login(user.UserID, user.Name, user.HeadImgUrl)
            that.$store.commit("login", true);
            that.$store.commit("setUser", user);
            uni.setStorageSync("xj_token", d.Token);
            uni.setStorageSync("user", user);
            uni.switchTab({
              url: "/pages/tab/home",
            });
          }else{
			return that.$pv.msg("登录失败");
		  }
        },
        fail(err) {
			console.log('失败了',err);
          return that.$pv.msg("登录失败" + err.code);
        },
      });
    },
  },
};
</script>

<style lang="scss">
body,
html {
  width: 100%;
  height: 100vh;
}

.bg {
  width: 100%;
  height: 100vh;
  background-color: #fff;
}

.check {
  margin-top: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #333;
  text {
    font-size: 28rpx;
  }
}
.bottom {
  color: #cacaca;
  font-size: 22rpx;
  position: absolute;
  bottom: 70rpx;
  width: 100%;
  text-align: center;
  margin: 0;
}

.login {
  box-sizing: border-box;
  padding: 180rpx 88rpx 0 88rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .logo {
    width: 512rpx;
    height: 512rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      width: 50%;
      height: 50%;
      border-radius: 24rpx;
    }
  }

  .title {
    width: 100%;
    height: 100%;
    overflow-wrap: break-word;
    color: rgba(10, 10, 10, 1);
    font-size: 32px;
    font-family: PingFang-SC-Medium;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 80rpx;
    margin: 80rpx 0;
  }

  .phone {
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(10, 10, 10, 0.1);

    text {
      color: #000;
    }

    .line {
      margin: 0 20rpx;
      color: #999;
    }

    input {
      width: 400rpx;
      color: #333333;
    }
  }

  .yzm-login {
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0px 4rpx 16rpx 0px rgba(46, 46, 46, 0.4);
    background-image: linear-gradient(
      225deg,
      rgba(2, 2, 2, 0.9) 0,
      rgba(54, 54, 54, 0.9) 100%
    );
    border-radius: 6px;
    margin-top: 40rpx;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90rpx;

    image {
      width: 60rpx;
      height: 60rpx;
      margin-right: 5rpx;
    }
  }

  .wx-login {
    width: 100%;
    box-shadow: 0px 4px 10px 0px rgba(46, 46, 46, 0.4);
    border-radius: 6px;
    text-align: center;
    margin-top: 30rpx;
    color: #6bcc03;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90rpx;

    image {
      width: 60rpx;
      height: 60rpx;
      margin-right: 5rpx;
    }
  }
}
.tips{
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		box-sizing: border-box;
		background-color: #fff;
		border-bottom: 2rpx solid #eee;
		padding: 20rpx;
		padding-top: 100rpx;
		view{color: #000;}
		.tit{
			font-weight: bold;
			font-size: 30rpx;
		}
		.lit{
			font-size: 28rpx;
		}
	}
</style>